<template>
  <div>
    <h1>用户列表</h1>
    <div>
      <a-table :columns="columns" :dataSource="list">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'account'">
            <smile-outlined />
              账户
          </template>
        </template>

        <template #bodyCell="{ column,record}">
          <template v-if="column.key === 'imgUrl'">
            <a-badge :count="1">
              <a-avatar>
                <template #icon>
                  <img :src="record.imgUrl" alt="">
                </template>
              </a-avatar>
          </a-badge>
          </template>
          <template v-if="column.key === 'role'">
              {{record.role.name}}
          </template>
          <template v-if="column.key === 'opt'">
           <a-space>
              <a-button type="primary" @click="detail(record._id)">查看</a-button>
              <a-button type="primary" danger>删除</a-button>
              <a-button>修改</a-button>
           </a-space>
          </template>
        </template>

      </a-table>
    </div>
    <div>{{list}}</div>
  </div>
</template>

<script lang='ts'>
import {ref,reactive,toRefs,onBeforeMount} from 'vue'
import api from '../api'
import { SmileOutlined } from '@ant-design/icons-vue';
export default{
 components:{
  SmileOutlined
 },
 setup(){
  let columns=[
      {
        title:'姓名',
        dataIndex:'account',
        key:'account'
      },
      {
        title:'邮箱',
        dataIndex:'email',
        key:'email'
      },
      {
        title:'头像',
        dataIndex:'imgUrl',
        key:'imgUrl'
      },
      {
        title:'角色',
        dataIndex:'role',
        key:'role'
      },
      {
        title:'操作',
        dataIndex:'opt',
        key:'opt'
      }
  ]

  let state=reactive({
    list:[]
  })
  const getAccountList=async()=>{
   const {data:{data}}= await api.user.getAccountList()
   state.list=data
  }
  onBeforeMount(()=>{
    getAccountList()
  })
  const detail=(id:string)=>{
    console.log(id);
    
  }
  return{
    ...toRefs(state),
    columns,
    detail
  }
 }
}
</script>

<style lang='scss' scoped>
</style>